import {editPmLevel, selectAllPmLevel} from '@/api/manager'
import {CCard} from '@/components/card'
import {CnMediumSpan} from '@/components/text'
import {useLoading} from '@/hooks/loading'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import deepClone from '@/libs/deepClone'
import {defineComponent, computed, reactive, watch, onMounted} from 'vue'

export default defineComponent({
  setup(props, ctx) {
    const {store, router} = useGlobalAPI()
    const loginUserInfo = computed(() => store.getters['dingding/ddUserInfo'])
    const {loading, startLoading, closeLoading} = useLoading()
    let state = reactive<{
      pmLevelList: {
        pmLevelHighValue: number
        pmLevelLowValue: number
        pmLevelName: 'A' | 'B' | 'C' | 'D' | 'S'
        sort: number
      }[]
      defaultPmLevelList: {
        pmLevelHighValue: number
        pmLevelLowValue: number
        pmLevelName: 'A' | 'B' | 'C' | 'D' | 'S'
        sort: number
      }[]
    }>({
      pmLevelList: [],
      defaultPmLevelList: []
    })

    watch(
      () => loginUserInfo.value,
      n => {
        if (n.roleLevel > 2) {
          router.push('/')
        }
      },
      {
        immediate: true
      }
    )

    function getPageData() {
      selectAllPmLevel()
        .then(res => {
          state.pmLevelList = deepClone(res.data.sort((a, b) => a.sort - b.sort))
          state.defaultPmLevelList = deepClone(res.data.sort((a, b) => a.sort - b.sort))
        })
        .catch(err => {})
    }

    function handleSubmit() {
      startLoading()
      editPmLevel(state.pmLevelList)
        .then(res => {
          closeLoading()
        })
        .catch(err => {
          closeLoading()
        })
    }
    function handleReset() {
      state.pmLevelList = deepClone(state.defaultPmLevelList)
    }

    onMounted(() => {
      getPageData()
    })
    return () => (
      <div class='w-full h-full flex flex-col items-center justify-start relative'>
        <CCard title='修改绩效等级' class='CBC-bg-toRight text-12'>
          <div class='flex items-center justify-center'>
            <a-form>
              {state.pmLevelList.map((level, idx) => (
                <div class='flex items-center gap-x-16 mb-32'>
                  <a-form-item class='m-0'>
                    <a-input
                      v-model={[state.pmLevelList[idx].pmLevelLowValue, 'value']}
                      class='w-80'
                    ></a-input>
                  </a-form-item>
                  <CnMediumSpan>
                    {`<`} 等级{level.pmLevelName} ≤
                  </CnMediumSpan>
                  <a-form-item class='m-0'>
                    <a-input
                      v-model={[state.pmLevelList[idx].pmLevelHighValue, 'value']}
                      class='w-80'
                    ></a-input>
                  </a-form-item>
                </div>
              ))}
              <a-form-item>
                <div class='flex items-center gap-x-32 pl-46'>
                  <a-button onClick={handleReset}>重置</a-button>
                  <a-button type='primary' onClick={handleSubmit}>
                    提交
                  </a-button>
                </div>
              </a-form-item>
            </a-form>
          </div>
        </CCard>
      </div>
    )
  }
})
